/**
 * 事件处理
 *    React中事件处理与原生事件类似，但是需要将事件名修改为小驼峰写法
 *      onclick="xxx()"   => onClick={}
 *      oninput="xxx()"   => onInput={}
 * 事件处理函数
 *      onClick={this.fn1}          => fn1 就是事件处理函数
 *      onClick={() => this.fn1()}  => 箭头函数才是事件处理函数，this.fn1 是一个普通函数
 *      PS:
 *        1. 事件处理函数的特征之一，就是会自动接受到事件对象 event
 *        2. 事件对象与原生JS中事件对象类似。但是该事件对象是经过React处理过的，叫做合成事件对象。区别主要在于合成事件对象中帮我们处理了兼容性问题。
 *
 * 如果阻止冒泡、阻止默认行为、捕获模式
 *      使用 事件对象 event 身上的方法即可。
 *      1. event.stopPropagation(); // 阻止冒泡
 *      2. event.preventDefault(); // 阻止默认行为
 *      3. 绑定事件时添加 Capture 后缀，就会变成捕获模式
 *          onClick => onClickCapture
 *          onInput => onInputCapture
 */

import React, { type MouseEvent } from "react";

class App extends React.Component {
  fn1(event) {
    console.log("fn1", event);
  }

  parent() {
    console.log("parent");
  }

  son(event: MouseEvent) {
    // event.stopPropagation(); // 阻止冒泡
    console.log("son");
  }

  jump(event: MouseEvent) {
    event.preventDefault(); // 阻止默认行为
    alert("jump");
  }

  render() {
    return (
      <div>
        <h1>事件处理</h1>
        <div
          style={{ width: 200, height: 200, backgroundColor: "green" }}
          onClickCapture={this.parent}
        >
          <button onClick={this.son}>按钮0</button>
          <a href="https://www.baidu.com" onClick={this.jump}>
            跳转百度
          </a>
        </div>
        <hr />

        <button onClick={this.fn1}>按钮1</button>
        <button
          onClick={(event) => {
            this.fn1(event);
          }}
        >
          按钮2
        </button>
      </div>
    );
  }
}

export default App;
